소개

안녕하세요, 헬시어 프론트 정대헌 및 주효정입니다. 효정이는 빨리 파트 완성해 주었는데, 제가 늦는 바람에 이제야 PR 드리는 점 먼저 사과 드립니다. 특별히 부가적으로 구현한 기능은 없고 대체로 비슷한 것 같습니다. V-live 형태의 실시간 하트를 구현하려고 swr 라이브러리를 사용해보고 싶었는데 결국 어렵게 되었네요..

프로젝트 링크: https://react-vote-15th-team-healthier.vercel.app/
(현재 https 통신이 안되서 서버로부터 불러오는 부분은 보이지 않습니다)

구현한 기능

메인페이지: 링크에 접속하면 메인 페이지를 먼저 볼 수 있습니다.

투표: 투표하기를 클릭하는 경우 투표할 수 있는 페이지가 나옵니다. 회원가입 및 로그인을 진행한 후 투표가 가능합니다. 다중투표, 중복투표도 가능합니다. 로그인 하지 않은 상태에서 투표 시 에러메시지가 나타납니다.

결과보기: 결과보기를 클릭하는 경우 후보자들의 총 득표수를 확인할 수 있습니다.

회원가입: 기존에 가입된 아이디나 이메일을 입력하면 에러메시지가 나타납니다.
로그인: 회원가입 한 아이디와 비밀번호로 로그인이 가능합니다.
로그아웃: 로그인 상태에서 상단 바의 로그아웃 버튼을 이용해 로그아웃 할 수 있습니다.

styled 테마: 헬시어 메인 컬러를 사용해서 헬시어스러운 투표 페이지를 만들었습니다.
컴포넌트 분리: 코드의 가독성 및 재사용성을 위해 컴포넌트를 적절하게 분리했습니다.

*빠르게 하다보니 일부 js가 리팩토링이 안되고, any 태그가 다소 있습니다.

사용자 인증 부분은 RTK와 axios, react-cookie 라이브러리를 사용해 구현하였습니다. Access 토큰은 리덕스 스토어에, Refresh 토큰은 쿠키에 저장되는 방식입니다. 다음의 링크를 주로 참조하였습니다.
https://5xjin.github.io/blog/react_jwt_router/

협업

백엔드와의 협업
동일하게 API 문서를 제공받고 postman을 이용해 테스트하였습니다. 저는 개인적으로 JWT라는 개념을 이번에 처음 들었습니다. CORS 에러 발생한 것 잡고 하느라고 시간을 많이 쓴 것 같습니다. 지금이라도 서버 통신 개념을 조금씩 배워나가게 되니 다행인 것 같습니다.

프론트끼리 협업
트리 나눠서 코드 작성하는 정도로 마무리 하였습니다. 서로 코드리뷰도 하는 것이 이상적이겠지만, 다소 아쉬움이 남는 것 같아요.